<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="yes" name="apple-touch-fullscreen" />
    <meta content="telephone=no,email=no" name="format-detection" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>我的</title>
    <link rel="stylesheet" href="./css/a.css">
    <link rel="stylesheet" href="css/reset.css" media="screen" title="no title">
    <link rel="stylesheet" href="css/invoices.css" media="screen" title="no title">
    <link rel="stylesheet" href="css/mescroll.min.css" media="screen" title="no title">
    <script src="js/flexible.js"></script>
    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="js/cleave.min.js"></script>
    <script src="js/util.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/clipboard.min.js"></script>
    <!-- <script src="js/mescroll.min.js"></script> -->
    <script src="./js/bscroll.min.js"></script>

</head>

<body>

    <div id="change_history_page" class="change-history-page" v-cloak>
        <!-- 头部栏 -->
        <div class="title-bar">
            <div class="left-img" id="back">
                <img src="img/jt_l.png" alt="">
            </div>
            <div class="title">
                我的
            </div>
        </div>
        <!-- 选项卡 -->
        <nav>
            <ul>
                <li class="active" @click="toggle(0)">
                    交易记录
                </li>
                <li @click="toggle(1)">
                    可兑换签纸贺
                </li>
                <li @click="toggle(2)">
                    兑换历史
                </li>
            </ul>
            <div class="line"></div>
        </nav>

           <div class="wrap">
               <div class="wrap-content">
                <div class="wrap-right" v-show="num==0">
                    <div class="right" >
                        <div class="right-time">
                            兑换时间：2020-07-15 23：11：24
                        </div>
                        <div class="right-card">
                            <!-- 手机号登录 -->
                            <p v-if="isIpone">活动名称：积分兑换活动</p>
                            <!-- 卡号登录 -->
                            <p v-if="!isIpone">兑换卡号：1231231231231231</p>
                            <p class="right-card-je">
                                金额：<span>2300元</span>
                            </p>
                        </div>
                        <div class="right-end-time">
                            <p>查卡密/去使用截止至：2020-12-31</p>
                        </div>
                        <block v-for="(item,index) in historyData" :key="index">
                            <div class="right-list">
                                <img :src="item.cardInfo.brandImg" alt="logo">
                                <div class="right-list-content">
                                    <p>{{item.cardInfo.goodsName}}</p>
                                    <p>
                                        <span>使用说明 </span>
                                        <img src="./img/jt_r.png" alt="右箭头">
                                    </p>
                                </div>
                                <p @click="seeCard(item)" v-if="item.cardInfo.goodsType == '01'">
                                    {{item.cardInfo.isShowCard?'收起':'查卡密'}}
                                </p>
                                <p v-else @click="employ">去使用</p>
                            </div>
                            <!-- 点击查卡密，显示卡号密码等 -->
                            <div class="br-da" v-if="item.cardInfo.isShowCard">
                                <div class="right-list-cha">
                                    <div class="cha-card">
                                        <p>卡号：</p>
                                        <p> {{item.cardInfo.card}}</p>
    
                                        <!-- <p class="code"  :data-clipboard-text="item.cardInfo.card"  @click="copy">复制</p> -->
    
                                        <div class="fr btn">
                                            <input type="button" value="复制" class="copy-btn" :data-val="item.cardInfo.card">
                                        </div>
                                    </div>
                                    <div class="cha-card">
                                        <p>密码：</p>
                                        <p> {{item.cardInfo.password}}</p>
    
                                        <!-- <p class="code"  :data-clipboard-text="item.cardInfo.password"  @click="copy">复制</p>
                                         -->
    
                                        <div class="fr btn">
                                            <input type="button" value="复制" class="copy-btn"
                                                :data-val="item.cardInfo.password">
                                        </div>
                                    </div>
                                    <p>有效期至：{{item.cardInfo.expireDate}}</p>
                                </div>
                            </div>
                        </block>
                        <!-- 上拉加载 -->
                       
                    </div>
                    <div class="sl">上拉加载数据~</div>
                </div>
               </div>
           </div>

        
            


        <!-- 结束 -->
    </div>
</body>
<script type="text/javascript">
    Vue.component("one",{
        template:`  <div class="wrap">
               <div class="wrap-content">
                <div class="wrap-right" v-show="num==0">
                    <div class="right" >
                        <div class="right-time">
                            兑换时间：2020-07-15 23：11：24
                        </div>
                        <div class="right-card">
                            <!-- 手机号登录 -->
                            <p v-if="isIpone">活动名称：积分兑换活动</p>
                            <!-- 卡号登录 -->
                            <p v-if="!isIpone">兑换卡号：1231231231231231</p>
                            <p class="right-card-je">
                                金额：<span>2300元</span>
                            </p>
                        </div>
                        <div class="right-end-time">
                            <p>查卡密/去使用截止至：2020-12-31</p>
                        </div>
                        <block v-for="(item,index) in historyData" :key="index">
                            <div class="right-list">
                                <img :src="item.cardInfo.brandImg" alt="logo">
                                <div class="right-list-content">
                                    <p>{{item.cardInfo.goodsName}}</p>
                                    <p>
                                        <span>使用说明 </span>
                                        <img src="./img/jt_r.png" alt="右箭头">
                                    </p>
                                </div>
                                <p @click="seeCard(item)" v-if="item.cardInfo.goodsType == '01'">
                                    {{item.cardInfo.isShowCard?'收起':'查卡密'}}
                                </p>
                                <p v-else @click="employ">去使用</p>
                            </div>
                            <!-- 点击查卡密，显示卡号密码等 -->
                            <div class="br-da" v-if="item.cardInfo.isShowCard">
                                <div class="right-list-cha">
                                    <div class="cha-card">
                                        <p>卡号：</p>
                                        <p> {{item.cardInfo.card}}</p>
    
                                        <!-- <p class="code"  :data-clipboard-text="item.cardInfo.card"  @click="copy">复制</p> -->
    
                                        <div class="fr btn">
                                            <input type="button" value="复制" class="copy-btn" :data-val="item.cardInfo.card">
                                        </div>
                                    </div>
                                    <div class="cha-card">
                                        <p>密码：</p>
                                        <p> {{item.cardInfo.password}}</p>
    
                                        <!-- <p class="code"  :data-clipboard-text="item.cardInfo.password"  @click="copy">复制</p>
                                         -->
    
                                        <div class="fr btn">
                                            <input type="button" value="复制" class="copy-btn"
                                                :data-val="item.cardInfo.password">
                                        </div>
                                    </div>
                                    <p>有效期至：{{item.cardInfo.expireDate}}</p>
                                </div>
                            </div>
                        </block>
                        <!-- 上拉加载 -->
                       
                    </div>
                    <div class="sl">上拉加载数据~</div>
                </div>
               </div>
           </div>`
    })
    var Vue = new Vue({
        el: "#change_history_page",
        
        data: {
            num: 0,//点击导航，显示对应的列表
            jl_s: false,//点击交易记录列表，是否显示交易时间
            isIpone: false,//手机号登陆和卡号登录显示，切换
            timer: [
                { id: 1, flg: false, time: ' 2020-05-30 21:05:21', price: '- 200.00', flg: false },
                { id: 1, flg: false, time: ' 2020-05-30 21:05:21', price: '- 200.00', flg: false },
                { id: 1, flg: false, time: ' 2020-05-30 21:05:21', price: '- 200.00', flg: false },
                { id: 2, flg: true, time: ' 2020-05-30 21:05:21', price: '+ 1000.00', flg: true }
            ],
            jy_data:[
                {id:1,title:'暑期福利',time:'2020-03-01',price:600},
                {id:1,title:'暑期福利',time:'2020-03-01',price:600},
                {id:1,title:'暑期福利',time:'2020-03-01',price:600},
                {id:1,title:'暑期福利',time:'2020-03-01',price:600},
                {id:1,title:'暑期福利',time:'2020-03-01',price:600},
                {id:1,title:'暑期福利',time:'2020-03-01',price:600},
                {id:1,title:'暑期福利',time:'2020-03-01',price:600},
                {id:1,title:'暑期福利',time:'2020-03-01',price:600},
                {id:1,title:'暑期福利',time:'2020-03-01',price:600},
                {id:1,title:'暑期福利',time:'2020-03-01',price:600}
            ],
            historyData: [
                {
                    "cardInfo": {
                        "brandImg": "http://suo.im/6kBZbP",
                        "brandName": "淘票票",
                        "goodsName": "淘票票电子卡100元",
                        "expireDate": "2022-02-28",
                        "goodsType": "01",
                        "goodsId": "10086",
                    },


                },
                {
                    "cardInfo": {
                        "brandImg": "http://suo.im/6kBZbP",
                        "brandName": "美团",
                        "goodsName": "美团电子卡100元",
                        "expireDate": "2022-02-28",
                        "goodsType": "02",
                        "goodsId": "100876"
                    }
                },
                {
                    "cardInfo": {
                        "brandImg": "http://suo.im/6kBZbP",
                        "brandName": "美团",
                        "goodsName": "美团电子卡100元",
                        "expireDate": "2022-02-28",
                        "goodsType": "02",
                        "goodsId": "100876"
                    }
                },
                {
                    "cardInfo": {
                        "brandImg": "http://suo.im/6kBZbP",
                        "brandName": "淘票票",
                        "goodsName": "淘票票电子卡100元",
                        "expireDate": "2022-02-28",
                        "goodsType": "01",
                        "goodsId": "10086",
                    },


                },
                {
                    "cardInfo": {
                        "brandImg": "http://suo.im/6kBZbP",
                        "brandName": "美团",
                        "goodsName": "美团电子卡100元",
                        "expireDate": "2022-02-28",
                        "goodsType": "02",
                        "goodsId": "100876"
                    }
                },
                {
                    "cardInfo": {
                        "brandImg": "http://suo.im/6kBZbP",
                        "brandName": "美团",
                        "goodsName": "美团电子卡100元",
                        "expireDate": "2022-02-28",
                        "goodsType": "02",
                        "goodsId": "100876"
                    }
                },
                {
                    "cardInfo": {
                        "brandImg": "http://suo.im/6kBZbP",
                        "brandName": "淘票票",
                        "goodsName": "淘票票电子卡100元",
                        "expireDate": "2022-02-28",
                        "goodsType": "01",
                        "goodsId": "10086",
                    },


                },
                {
                    "cardInfo": {
                        "brandImg": "http://suo.im/6kBZbP",
                        "brandName": "美团",
                        "goodsName": "美团电子卡100元",
                        "expireDate": "2022-02-28",
                        "goodsType": "02",
                        "goodsId": "100876"
                    }
                },
                {
                    "cardInfo": {
                        "brandImg": "http://suo.im/6kBZbP",
                        "brandName": "美团",
                        "goodsName": "美团电子卡100元",
                        "expireDate": "2022-02-28",
                        "goodsType": "02",
                        "goodsId": "100876"
                    }
                },
                {
                    "cardInfo": {
                        "brandImg": "http://suo.im/6kBZbP",
                        "brandName": "淘票票",
                        "goodsName": "淘票票电子卡100元",
                        "expireDate": "2022-02-28",
                        "goodsType": "01",
                        "goodsId": "10086",
                    },


                },
                {
                    "cardInfo": {
                        "brandImg": "http://suo.im/6kBZbP",
                        "brandName": "美团",
                        "goodsName": "美团电子卡100元",
                        "expireDate": "2022-02-28",
                        "goodsType": "02",
                        "goodsId": "100876"
                    }
                },
                {
                    "cardInfo": {
                        "brandImg": "http://suo.im/6kBZbP",
                        "brandName": "美团",
                        "goodsName": "美团电子卡100元",
                        "expireDate": "2022-02-28",
                        "goodsType": "02",
                        "goodsId": "100876"
                    }
                }

            ],
            oScroll:''
        },
        created() {
            //初始化数据
            this.initializeData();
        },
        mounted() {
                this.right();
            
           
        },
        methods: {
            left1(){
                // var _this=this;
                    // 上拉加载
            this.oScroll = new BScroll(".wrap1", {
                click:true,//Vue中使用bscroll，点击事件会失效，加上这个属性就可以解决了
                probeType: 1,//1一定时间触发事件，2实时触发scroll事件，3实时，swiper下也可以实时
                //下拉刷新：可以配置顶部下拉的距离（threshold） 来决定刷新时机以及回弹停留的距离（stop）
                //这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载
                pullUpLoad: {
                    threshold: 10
                },
                mouseWheel: {    // pc端同样能滑动
                    speed: 20,
                    invert: false
                },
                useTransition: false  // 防止iphone微信滑动卡顿
            });
            if(this.num==0){
                oScroll.on("pullingUp", ()=> {//将函数写成箭头函数，this的指向就不会发生改变了
                if ($('.sl').text() != "上拉加载数据~") {
                    return false;
                }else {
                    $(".sl").text('数据加载中。。。');
                    // setTimeout(()=> {
                        // var obj =   {id:1,title:'1111',time:'11111',price:600},
                        // _this.jy_data.push(obj);
                        // $(".sl").text('没有更多数据了~');
                    // }, 1000)
                    oScroll.finishPullUp();//可以多次执行上拉刷新
                }
            });
            }
            oScroll.refresh();
            },
            right(){
                 // 上拉加载
            var oScroll = new BScroll(".wrap", {
                click:true,//Vue中使用bscroll，点击事件会失效，加上这个属性就可以解决了
                probeType: 2,//1一定时间触发事件，2实时触发scroll事件，3实时，swiper下也可以实时
                //下拉刷新：可以配置顶部下拉的距离（threshold） 来决定刷新时机以及回弹停留的距离（stop）
                //这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载
                pullUpLoad: {
                    threshold: 10
                },
                mouseWheel: {    // pc端同样能滑动
                    speed: 20,
                    invert: false
                },
                useTransition: false  // 防止iphone微信滑动卡顿
            });
            oScroll.on("pullingUp", ()=> {//将函数写成箭头函数，this的指向就不会发生改变了
                if ($('.sl').text() != "上拉加载数据~") {
                    return false;
                }else {
                    $(".sl").text('数据加载中。。。');
                    setTimeout(()=> {
                        var obj = {
                            "cardInfo": {
                                "brandImg": "http://suo.im/6kBZbP",
                                "brandName": "美团",
                                "goodsName": "11111111",
                                "expireDate": "1111111",
                                "goodsType": "02",
                                "goodsId": "100876"
                            }
                        };
                        this.historyData.push(obj);
                        $(".sl").text('没有更多数据了~');
                    }, 1000)
                    oScroll.finishPullUp();//可以多次执行上拉刷新
                }
            });
            oScroll.refresh();
            },
            // 点击头部选项卡
            toggle(k) {
                this.num = k;
            },
            //初始化
            initializeData() {
                for (var i = 0; i < this.historyData.length; i++) {
                    this.historyData[i].cardInfo.isShowCard = false;
                }
            },
            //点击查看卡密
            seeCard(item) {
                console.log(item)
                item.cardInfo.card = "6789  3456  3456  6789";
                item.cardInfo.password = "6666  8888  3456  6789";
                item.cardInfo.isShowCard = !item.cardInfo.isShowCard;
                this.historyData = Object.assign([], this.historyData);
            },
            //使用说明
            goExplain() {
                window.location = "instructions.html";
            },
            //去使用
            employ() {

            },
            // 点击发送邮箱 
            send() {
                jQuery.toast('发送成功');
            },
            //点击交易记录，去兑换
            go_use() {

            },
            // 点击交易记录，显示明细
            jl_show() {
                // console.log(111)
                this.jl_s = !this.jl_s;
            }
        },

    })




    // /* jq */复制卡号和密码
    $(function () {
        //返回
        $("#back").on("click", function () {
            window.history.go(-1);
        });

        //复制到剪切板
        var clipboard = new ClipboardJS('.copy-btn', {
            text: function (that) {
                return $(that).data("val");
            }
        });
        clipboard.on('success', function (e) {
            console.log("success", e);
            $.toast("复制成功");
        });

        clipboard.on('error', function (e) {
            console.log("eror", e);
            $.toast("复制失败");
        });




        // 头部选项卡的步骤

        var nav = $('nav');
        var line = $('.line');

        var active = nav.find('.active');
        var pos = 0;
        var wid = 0;
        if (active.length) {
            pos = active.position().left;
            wid = active.width();
            line.css({
                left: pos,
                width: wid
            });
        }

        nav.find('ul li').click(function (e) {

            // $(this).css({color:"#F9404A",fontWeight:"bold"})
            if (!$(this).hasClass('active')) {
                var _this = $(this);
                nav.find('ul li').removeClass('active');
                // _this.css({color:'#9B9B9B'})
                var position = _this.position();
                var width = _this.width();
                if (position.left >= pos) {
                    // line.animate({ left: position.left - pos }
                    // ,100,function(){
                    //     line.animate({width:width},100)
                    // })
                    line.animate({
                        width: ((position.left - pos) + width)
                    }, 100, function () {

                        line.animate({
                            width: width,
                            left: position.left
                        }, 150);
                        _this.addClass('active');

                    });
                } else {

                    line.animate({
                        left: position.left,
                        // width: ((pos - position.left) + wid)
                    }, 300, function () {
                        line.animate({
                            width: width
                        }, 150);
                        _this.addClass('active');
                    });
                }

                // if(!_this.hasClass('active')){

                // }

                pos = position.left;
                wid = width;
            }
        });
    })
</script>

</html>